import { Divider, Input, Collapse } from "antd";
import { useComponentConfigStore } from "@/stores/low-editor-comps-conf";
import { MaterialItem } from "./MaterialItem";
import { SearchOutlined } from "@ant-design/icons";
import { useState } from "react";
import { debounce } from "lodash-es";
export function MaterialMenu() {
  const { componentConfig } = useComponentConfigStore();
  const [filterValue, setFilterValue] = useState("");

  const menuItems = componentConfig
    .filter(item => {
      return item.key !== 'construction'
    })
    .filter(item => {
      return Object.values(item.children).some(cell => cell.desc.includes(filterValue));
    })
    .map(item => {
      const cItem = Object.values(item.children)
        .filter(cell => cell.desc.includes(filterValue))
        .map(cell => <MaterialItem name={cell.name} desc={cell.desc} key={cell.name} />);
      return {
        key: item.key,
        label: item.label,
        children: <div className="flex flex-wrap gap-3">{cItem}</div>,
      };
    });
  const handleFilter = debounce(e => {
    setFilterValue(e.target.value);
  }, 300);
  return (
    <div className="flex flex-col overflow-y-auto h-full">
      <div className="px-3">
        <Input placeholder="输入关键字查询组件" onChange={handleFilter} suffix={<SearchOutlined />} />
      </div>
      <Divider style={{ margin: "12px 6px 3px", width: "auto", minWidth: "unset" }} />
      <main className="flex flex-col flex-1 h-3 overflow-y-auto hideScrollBar">
        <Collapse defaultActiveKey={menuItems.map(item => item.key)} ghost items={menuItems} expandIconPosition="end" />
      </main>
    </div>
  );
}
